<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>fly line</title>
	<link rel="stylesheet" type="text/css" href="./new_file.css" />
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}

		li {
			list-style: none;
		}

		a {
			text-decoration: none;
		}

		

		/* 让元素沿着不规则路径运动 */
		/* offset-distance：偏移角度 */

		.fly {
			overflow: hidden;
			position: absolute;
			left: 0px;
			top: 0px;
			offset-path: path("M1389,648s-103.9-236.91-355-103");
			offset-distance: 0;
			animation: liangliangzi 1.5s linear infinite;
			transform: rotateY(180deg);
		}

		.fly2 {
			overflow: hidden;
			position: absolute;
			left: 0px;
			top: 0px;
			offset-path: path("M1391,649s150.38-164.338,269,19"); 
			offset-distance: 0;
			animation: liangliangzi 1.5s linear infinite;
			transform: rotateY(180deg);
		}

		.fly3 {
			overflow: hidden;
			position: absolute;
			left: 0px;
			top: 0px;
			offset-path: path("M1390,650s17.26-219.533-175-274");
			offset-distance: 0;
			animation: liangliangzi 1.5s linear infinite;
			transform: rotateY(180deg);
		}

		.fly4 {
			overflow: hidden;
			position: absolute;
			left: 0px;
			top: 0px;
			offset-path: path("M1390,649s49.97,47.584,6,182");
			offset-distance: 0;
			animation: liangliangzi 1.5s linear infinite;
			transform: rotateY(180deg);
		}
	</style>
</head>

<body>
	<div class="map">
		<img src="./img/dian.png" width="30px" class="fly">
		<img src="./img/dian.png" width="20px" class="fly2" />
		<img src="./img/dian.png" width="30px" class="fly3" />
		<img src="./img/dian.png" width="20px" class="fly4" />
	</div>

	<!-- <div class="map2">
	<svg xmlns="http://www.w3.org/2000/svg" width="355.72" height="144.719" viewBox="0 0 355.72 144.719" style="margin-left:1033.75 ; margin-top: 503.5;" class="path">
	  <defs>
	  <filter id="f1" x="0" y="0">
	    <feOffset result="offOut" in="SourceGraphic" dx="0" dy="3" />				    		  
	    <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
		<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
	  </filter>
	  <style>
	    .cls-1 {
	      fill: none;
	      stroke: #6cf3ff;
	      stroke-width: 1px;
	      fill-rule: evenodd;
	    }
	    </style>
	  </defs>
	 <path id="_1" data-name="1" class="cls-1" d="M1389,648s-103.9-236.91-355-103" transform="translate(-1033.75 -503.5)"filter="url(#f1)"/>
	  </svg>
	
	 <svg xmlns="http://www.w3.org/2000/svg" width="269.79" height="87.5" viewBox="0 0 200% 200%"  class="path2">
	    <defs>
	    <filter id="f1" x="0" y="0">
	      <feOffset result="offOut" in="SourceGraphic" dx="0" dy="3" />				    		  
	      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
	  	<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
	    </filter>
	    <style>
	      .cls-1 {
	        fill: none;
	        stroke: #6cf3ff;
	        stroke-width: 1px;
	        fill-rule: evenodd;
	      }
	      </style>
	    </defs>
	  <path id="_2" data-name="2" class="cls-1" d="M1391,649s150.38-164.338,269,19" transform="translate(-1390.62 -580.781)" filter="url(#f1)"/>
	    </svg>
		
		<svg xmlns="http://www.w3.org/2000/svg" width="176.03" height="274.531" viewBox="0 0 176.03 274.531"  class="path3">
		   <defs>
		   <filter id="f1" x="0" y="0">
		     <feOffset result="offOut" in="SourceGraphic" dx="0" dy="3" />				    		  
		     <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
		 	<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
		   </filter>
		   <style>
		     .cls-1 {
		       fill: none;
		       stroke: #6cf3ff;
		       stroke-width: 1px;
		       fill-rule: evenodd;
		     }
		     </style>
		   </defs>
		 <path id="_3" data-name="3" class="cls-1" d="M1390,650s17.26-219.533-175-274" transform="translate(-1214.88 -375.531)" filter="url(#f1)"/>
		   </svg>
		   
		   <svg xmlns="http://www.w3.org/2000/svg" width="24.93" height="182.531" viewBox="0 0 24.93 182.531"  class="path4">
		      <defs>
		      <filter id="f1" x="0" y="0">
		        <feOffset result="offOut" in="SourceGraphic" dx="0" dy="3" />				    		  
		        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
		    	<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
		      </filter>
		      <style>
		        .cls-1 {
		          fill: none;
		          stroke: #6cf3ff;
		          stroke-width: 1px;
		          fill-rule: evenodd;
		        }
		        </style>
		      </defs>
		    <path id="_4" data-name="4" class="cls-1" d="M1390,649s49.97,47.584,6,182" transform="translate(-1389.66 -648.625)" filter="url(#f1)"/>
		      </svg>
		
	  <img src="img/dian.png" width="30px" class="fly">
	  <img src="img/dian.png" width="30px" class="fly2">
	  <img src="img/dian.png" width="30px" class="fly3">
	  <img src="img/dian.png" width="30px" class="fly4">
	</div> -->
</body>

</html>